<template>
  <div>
    <el-form label-width="100px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号：" class="login-label">
        <el-input placeholder="请输入内容" v-model="school_number" clearable class="input"></el-input>
      </el-form-item>
      <el-form-item label="密码：" class="login-label">
        <el-input placeholder="请输入密码" v-model="password" show-password class="input"></el-input>
      </el-form-item>
      <el-button type="primary" class="login-button" @click="Login">登录</el-button>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      school_number: '',
      password: ''
    }
  },
  methods: {
    async Login() {
      let params ={
        school_number:this.school_number,
        password:this.password
      }
      const res =await axios.post('/api/index/index/login',params)
      const {code,msg,data} = res.data
      if (code==200){
        this.$cookieStore.setCookie('session',data.session_key)
        //获取用户信息
        const getinfo = await axios.get('/api/api/api/getUserInfo?session_key='+data.session_key)

        this.$cookieStore.setCookie("username",getinfo.data.data.name)
        this.$cookieStore.setCookie('userId',getinfo.data.data.id)
        // //获取用户权限等级
        const getrole = await axios.get('/api/api/api/getUserRole?session_key='+data.session_key)
        this.$cookieStore.setCookie("userRole",getrole.data.data.role_name)
        this.$message.success(msg)
        this.$router.push('/backstage')
      }

    }
  }
}
</script>

<style scoped>
.register {
  display: inline-block;
  position: relative;
  margin-top: 10px;
}

.login-button {
  margin-left: 70px;
  margin-top: 10px;
  width: 260px;
  display: block;
}

.login-label {
  margin-left: 30px;
  margin-top: 10px;
  display: inline-block;
}

.input {
  width: 200px;
}

.login-box {
  width: 400px;
  height: 300px;
  margin: 350px auto;
  padding: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.login-title {
  position: relative;
  margin-top: 20px;
  margin-left: 150px;
}
</style>
